<template>
  <div class="config-container">
    <div class="config-header">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础配置" name="basic">
          <el-form :model="basicConfig" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicConfig.systemName" />
            </el-form-item>
            <el-form-item label="系统Logo">
              <el-upload
                class="logo-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="handleLogoUpload"
              >
                <img v-if="basicConfig.logo" :src="basicConfig.logo" class="logo">
                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input 
                v-model="basicConfig.description" 
                type="textarea" 
                :rows="3"
              />
            </el-form-item>
            <el-form-item label="版权信息">
              <el-input v-model="basicConfig.copyright" />
            </el-form-item>
            <el-form-item label="备案信息">
              <el-input v-model="basicConfig.icp" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="邮件配置" name="email">
          <el-form :model="emailConfig" label-width="120px">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailConfig.smtpServer" />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input-number v-model="emailConfig.smtpPort" :min="1" :max="65535" />
            </el-form-item>
            <el-form-item label="发件人邮箱">
              <el-input v-model="emailConfig.fromEmail" />
            </el-form-item>
            <el-form-item label="发件人密码">
              <el-input v-model="emailConfig.password" type="password" show-password />
            </el-form-item>
            <el-form-item label="SSL加密">
              <el-switch v-model="emailConfig.ssl" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="存储配置" name="storage">
          <el-form :model="storageConfig" label-width="120px">
            <el-form-item label="存储方式">
              <el-radio-group v-model="storageConfig.type">
                <el-radio label="local">本地存储</el-radio>
                <el-radio label="oss">阿里云OSS</el-radio>
                <el-radio label="cos">腾讯云COS</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="storageConfig.type === 'oss'">
              <el-form-item label="AccessKey">
                <el-input v-model="storageConfig.oss.accessKey" />
              </el-form-item>
              <el-form-item label="AccessSecret">
                <el-input v-model="storageConfig.oss.accessSecret" show-password />
              </el-form-item>
              <el-form-item label="Bucket">
                <el-input v-model="storageConfig.oss.bucket" />
              </el-form-item>
              <el-form-item label="Endpoint">
                <el-input v-model="storageConfig.oss.endpoint" />
              </el-form-item>
              <el-form-item label="域名">
                <el-input v-model="storageConfig.oss.domain" />
              </el-form-item>
            </template>

            <template v-if="storageConfig.type === 'cos'">
              <el-form-item label="SecretId">
                <el-input v-model="storageConfig.cos.secretId" />
              </el-form-item>
              <el-form-item label="SecretKey">
                <el-input v-model="storageConfig.cos.secretKey" show-password />
              </el-form-item>
              <el-form-item label="Bucket">
                <el-input v-model="storageConfig.cos.bucket" />
              </el-form-item>
              <el-form-item label="Region">
                <el-input v-model="storageConfig.cos.region" />
              </el-form-item>
              <el-form-item label="域名">
                <el-input v-model="storageConfig.cos.domain" />
              </el-form-item>
            </template>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="config-footer">
      <el-button type="primary" @click="handleSave">保存配置</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')

// 基础配置
const basicConfig = ref({
  systemName: '后台管理系统',
  logo: '',
  description: '这是一个功能强大的后台管理系统',
  copyright: '© 2024 Company',
  icp: '粤ICP备xxxxxxxx号'
})

// 邮件配置
const emailConfig = ref({
  smtpServer: 'smtp.example.com',
  smtpPort: 465,
  fromEmail: 'admin@example.com',
  password: '',
  ssl: true
})

// 存储配置
const storageConfig = ref({
  type: 'local',
  oss: {
    accessKey: '',
    accessSecret: '',
    bucket: '',
    endpoint: '',
    domain: ''
  },
  cos: {
    secretId: '',
    secretKey: '',
    bucket: '',
    region: '',
    domain: ''
  }
})

// 处理Logo上传
const handleLogoUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    basicConfig.value.logo = e.target.result
  }
  reader.readAsDataURL(file)
  return false
}

// 保存配置
const handleSave = () => {
  // TODO: 调用保存接口
  ElMessage.success('保存成功')
}

// 重置配置
const handleReset = () => {
  // TODO: 重置为初始配置
  ElMessage.success('重置成功')
}
</script>

<style scoped>
.config-container {
  padding: 20px;
}

.config-header {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.config-footer {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.logo-uploader {
  text-align: center;
}

.logo-uploader .logo {
  width: 200px;
  height: 60px;
  object-fit: contain;
}

.logo-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.logo-uploader .el-upload:hover {
  border-color: #409EFF;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style> 